<template>
	<view class="container" :style="{height: `${windowHeight}px`}">
		<view class="card">
			<uv-cell-group :border="false">
				<uv-cell title="退出登陆" :border="false" isLink @click="handleLogout"></uv-cell>
			</uv-cell-group>
		</view>
	</view>

	<uv-modal ref="modal" title="系统提示" content='确定注销并退出系统吗？' showCancelButton asyncClose
		@confirm="confirmLogout"></uv-modal>
</template>

<script lang="ts" setup>
	import { useUserStore, useAppStore } from '@/store';
	import { ref, getCurrentInstance } from 'vue';
	import {pages} from '@/utils/page-url';

	const userStore = useUserStore();
	const appStore = useAppStore();
	const { proxy } = getCurrentInstance();
	const modal = ref();

	const windowHeight = () => {
		return uni.getSystemInfoSync().windowHeight;
	}

	const handleLogout = () => {
		modal.value.open();
	}

	const confirmLogout = async () => {
		await userStore.logout();
		modal.value.close();
		if (appStore.loginAuth) {
			// @ts-ignore
			proxy.$tab.reLaunch(pages.login);
		} else {
			// @ts-ignore
			proxy.$tab.navigateBack();
		}
	}
</script>

<style lang="scss">
	.card {
		margin: 10px 10px;
		background-color: #fff;
		/* 设置阴影 */
		box-shadow: 0 0 6px #e3e3e3;
		border-radius: 10px;
		border: 1px solid rgba(255, 255, 255, 0.5);
	}
</style>